import React, {useEffect, useState} from "react"
import "./Waterfall.less"
import pic from "../assets/images/index.js"
import {group, groupTest} from "./Waterfall-utils.js"
import testData from "./test.js"

const picWidth =300
const picGap = 20

const style = ({name, x, y}) => {
  return {transform: `translate(${x}px, ${y}px)`}
}

const Waterfall = () => {
  const [images, $images] = useState([])
  const [test, $test] = useState([])

  useEffect(() => {
    group(pic, 5, picWidth, picGap).then(matrix => {
      $images(matrix.flat())
    })

    const m = groupTest(testData, 6, picWidth, picGap)
    console.info(m)
    // $test(m.flat())
  }, []);

  return <>
    <h1>Waterfall</h1>
    <div className={"water-fall"}>
      {
        test.map((pic, idx) => {
          return <div className={'item'} style={{maxWidth: `${picWidth}px`}}>
            <div style={{
              width: `${picWidth}px`,
              height: `${pic.height * (picWidth / pic.width)}px`,
              transform: `translate(${pic.x}px, ${pic.y}px)`
            }}>
              <h1>{pic.idx}</h1>
              {pic.width},{pic.height}
            </div>
          </div>
        })
      }

      {
        images.map((pic, idx) => {
          return <div className={'item'} style={{maxWidth: `${picWidth}px`}}>
            <img alt={''} src={`src/assets/images/${pic.name}`} style={style(pic)}/>
          </div>
        })
      }

    </div>
  </>
}

export default Waterfall
